<template>
  <div id="test">
    <van-picker title="标题" :columns="columns" @change="handleChange" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { PickerOption } from 'vant';
const columns = ref([
  // 第一列
  [
    { text: '合肥', value: 'hf' },
    { text: '芜湖', value: 'wh' },
    { text: '马鞍山', value: 'mas' },
  ],
  // 第二列
  [
    { text: '数学', value: 'math' },
    { text: '语文', value: 'chinese', disabled: false },
    { text: '英语', value: 'endlish', disabled: false },
  ],
  [
    { text: '小学', value: '1' },
    { text: '初中', value: '2', disabled: false },
    { text: '高中', value: '3', disabled: false },
  ],
]);
const handleChange = ({
  selectedValues,
  selectedOptions,
  selectedIndexes,
  columnIndex,
}: PickerOption) => {
  if (selectedValues[0] != 'hf') {
    columns.value[1].forEach((el, index) => {
      if (index >= 1) {
        el.disabled = true;
      }
    });
    columns.value[2].forEach((el, index) => {
      if (index >= 1) {
        el.disabled = true;
      }
    });
  } else {
    columns.value.forEach((a) => {
      a.forEach((b) => {
        b.disabled = false;
      });
    });
  }

  if (selectedValues[2] == '3') {
    columns.value[0].forEach((el, index) => {
      if (index > 0) {
        el.disabled = true;
      }
    });
  } else {
  }
};
</script>

<style></style>
